<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery-1.5.2.min.js"></script>
		<script type="text/javascript">
			var jq = jQuery;
		</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jqgrid/grid.locale-en.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jqgrid/jquery.jqGrid.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery.fmatter.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery.maskedinput-1.3.js"></script>
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/plugins/grid.addons.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/plugins/jquery.searchFilter.js"></script>

	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.widget.js"></script>
	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.datepicker.js"></script>
	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.core.js"></script>
	
		

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Producto</title>
	</head>

	<body>
<script type="text/javascript">
	
	

	$(function() {

		$.extend($.jgrid.defaults, {
			datatype : 'json',
			jsonReader : {
				repeatitems : false,
				total : function(result) {
					//Total number of pages
					return Math.ceil(result.total / result.max);
				},
				records : function(result) {
					//Total number of records
					return result.total;
				}
			},
			prmNames : {
				rows : 'max',
				search : null
			},
			height : 'auto',
			viewrecords : true,
			rowList : [ 10, 20, 50, 100 ],
			altRows : true,
			loadError : function(xhr, status, error) {
				alert(error);
			}
		});

		$.extend($.jgrid.add, {
			closeAfterEdit : true,
			closeAfterAdd : true,
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeEditData : function(data) {
				delete data.oper;
				return JSON.stringify(data);
			}
		});
		
		$.extend($.jgrid.edit, {
			closeAfterEdit : true,
			closeAfterAdd : true,
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeEditData : function(data) {
				delete data.oper;
				return JSON.stringify(data);
			}
		});
			$.extend($.jgrid.del, {
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeDelData : function(data,postdata) {
				
				return JSON.stringify(data);
			}
		});


		var editOptions = {		    
			onclickSubmit : function(params, postdata) {
				params.url = URL + 'update/' + postdata.id;				
			},
			afterSubmit : function(response, postdata) 
				{ 
			        var result = eval('(' + response.responseText + ')');
					var errors = "";
					
			        if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
			        }  else {
			        	jq("#dialog").text('Entry has been updated successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
			    	// only used for adding new records
			    	var new_id = null;
			    	
					return [result.success, errors, new_id];
				}
		};
		var addOptions = {
			onclickSubmit : function(params, postdata) {
				params.url = URL + 'save';				
			},
			afterSubmit : function(response, postdata) 
				{ 
			        var result = eval('(' + response.responseText + ')');
					var errors = "";
					
			        if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
			        }  else {
			        	jq("#dialog").text('Entry has been added successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
			    	// only used for adding new records
			    	var new_id = null;
			    	
					return [result.success, errors, new_id];
				}
		};
		var delOptions = {
 	 		onclickSubmit : function(params,postdata) {
				params.url = URL + 'delete/' + postdata;				
			}
 	  	};
 	  	
		var URL = '${pageContext.request.contextPath}/product/';
		var options = {
			url : URL+"/list",
			editurl : URL,
			colModel : [ {
				name:'id', label: 'ID',
				formatter:'integer',
				width: 40,
				search: false,
				editable: true,
				editoptions: {disabled: true, size:5}
			}, {
				name : 'name',
				index : 'name',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'price',
				index : 'price',
				formatter:'currency',
				formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "},
				width : 75,
				editable : true,
				editrules : { required : true },
				editoptions : { size : 10 }
			}, {
				name : 'createdBy',
				index : 'createdBy',
				search: false,
				width : 100,
				editable : true,
				editrules : { required : false },
				editoptions : {disabled: true,  size : 10 }
			}, {
				name : 'createdOn',
				index : 'createdOn',
				search: false,
				width : 110,
				editable : true,
				editrules : { required : false },
				editoptions : { disabled: true, size : 10 }
			}, {
				name : 'modifiedBy',
				index : 'modifiedBy',
				width : 100,
				search: false,
				editable : false,
				editrules : {
					required : false
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'modifiedOn',
				index : 'modifiedOn',
				width : 110,
				search: false,
				editable : false,
				editrules : {
					required : false
				},
				editoptions : {
					size : 10
				}
			} ],
			caption : "Products",
			pager : '#pager',
			height : 'auto',
			ondblClickRow : function(id) {
				jQuery(this).jqGrid('editGridRow', id, editOptions);
			}
		};
		
		$("#grid").jqGrid(options).navGrid('#pager', {search: false}, //options
			editOptions, addOptions, delOptions, {}
		);
		
		$("#srccontents").filterGrid("#grid",{
    gridModel:true,
    gridNames:true,   
    formtype:"vertical",
    enableSearch: true,   
    enableClear: true,
    autosearch: true 
    
  });

	});
</script>

		<p>
			Product
		</p>
		
	<div id="srccontents"></div>
	<br/>
	<table id="tblcontents" class="scroll"></table> 
	<div id="tblcontentsPager" class="scroll" style="text-align:right;">
	
	</div> 
		
		<div id="jqgrid">
			<table id="grid"></table>
			<div id="pager"></div>
		</div>

		<div id="dialog" title="Feature not supported" style="display: none">
			<p>
				That feature is not supported.
			</p>
		</div>

		<div id="dialogSelectRow" title="Warning" style="display: none">
			<p>
				Please select row
			</p>
		</div>

	</body>

	</html>